<template>
  <div>
    <!-- 搜索 -->
    <search></search>
    <!-- /搜索 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="wrap">
        <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="banner in banners" :key="banner.id">
            <img :src="banner.picUrl" alt="" />
          </van-swipe-item>
        </van-swipe>
        <!-- /轮播 -->
        <!-- 宫格导航 -->
        <van-grid column-num="3" clickable>
          <van-grid-item
            v-for="cate in cates"
            :key="cate.id"
            :icon="cate.icon"
            :text="cate.name"
            :to="{
              path:'/itemLists',
              query: {
                cate_id: cate.id
              }
            }"
          />
        </van-grid>
        <!-- /宫格导航 -->
        <!-- 推荐商品 -->
        <van-list
          v-model="loading"
          :finished="finished"
          :offset="offset"
          finished-text="没有更多了"
          @load="onLoad"
          v-if="items.length"
        >
          <floor
            @clickItem="enterDetail"
            @clickAddItem="addCart"
            :items="items" />
        </van-list>
        <!-- /推荐商品 -->
      </div>
    </van-pull-refresh>
    <my-tabbar />
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import Search from './components/Search'
import Floor from './components/Floor'
import { fetchBanner, fetchCate, fetchItems } from '@api'
import addCart from '@/mixins/addCart'
export default {
  mixins: [addCart],
  name: 'home',
  data () {
    return {
      banners: [],
      cates: [],
      items: [],
      page: 1, // 默认获取第一页数据
      pageSize: 5, // 一页多少条
      loading: false,
      finished: false,
      offset: 20,
      isLoading: false
    }
  },
  created () {
    this.fetchBanner()
    this.fetchCates()
    this.fetchItems()
  },
  methods: {
    addCart (item) {
      // 加入购物车
      console.log(item)
      item = { ...item, num: 1, checked: true }
      this._addCart(item)
    },
    enterDetail (itemId) {
      // 进入详情页
      this.$router.push(`/detail/${itemId}`)
    },
    onRefresh () {
      // 下拉刷新了
      this.items = []
      this.page = 1
      this.finished = false
      this.fetchItems()
    },
    onLoad () {
      // 上拉加载处理事件
      /*
      当触底事件触发后，将page++
      然后再调用fetchItems 获取下一页数据
      下一页数据应该和之前数据合并
      */
      this.page++
      this.fetchItems()
    },
    fetchItems () {
      // 请求推荐商品数据
      fetchItems({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        /*
        判断是否到了最后一页
        如果到了最后一页 loading变成false
        */
        this.isLoading = false
        if (res.data.code === 700) {
          this.loading = false
          this.finished = true
        }
        if (res.data.code === 0) {
          this.items = [...this.items, ...res.data.data]
          this.loading = false
        }
      })
    },
    fetchBanner () {
      // 请求banner
      fetchBanner().then(res => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    fetchCates () {
      fetchCate().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    }
  },
  components: {
    MyTabbar,
    Search,
    Floor
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  margin: 50px 0;
  .my-swipe {
    img {
      width: 100%;
    }
  }
  /* /deep/ .van-grid{
    img{
      width:80px;
      height: 80px;
    }
  } */
}
</style>
